<template>
  <!--头部区域-->
  <div class="q-header">
    <el-row>
      <!--头部左边区-->
      <el-col :span="14">
        <div class="grid-content bg-purple">
          <el-row :gutter="30">
            <el-col :span="5">
              <div class="grid-con first-grid">
                <img />
                <span>彩问卷</span>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-con bg-purple">
                <router-link to="/createques">
                	<span :class="classId1">创建问卷</span>
                </router-link>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-con bg-purple">
              	<router-link to="/myques">
                	<span :class="classId2">我的问卷</span>
                </router-link>              
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-con bg-purple">
              	<router-link to="/statques">
                	<span :class="classId3">统计分析</span>
                </router-link>                
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-con bg-purple">
              	<router-link to="/jurisdiction">
              		<span :class="classId4">权限设置</span>
              	</router-link>                
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <!--头部右边区-->
      <el-col :span="4" :offset="6">
        <div class="grid-content-right">
          <img />
          <span class="username">user112</span>
          <span class="vertical-hr"></span>
          <span class="quit">退出</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default{
  	props: ["classId1","classId2","classId3","classId4"]
  }
</script>

<style scoped="scoped">
  .q-header {
    height: 50px;
    background-color: rgb(85, 163, 228);
    width: 100%;
    line-height: 50px;
    overflow: hidden;
    font-family: "微软雅黑";
    font-size: 16px;
    letter-spacing: 1px;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.3);
  }
  .q-header a{
  	text-decoration: none;
  }
  .active {
    color: #fff;
  }
  .el-col {
    text-align: center;
    cursor: pointer;
  }
  .el-col a{
  	color: #A0CFFF;
  }
  .el-col a:hover{
  	color: #fff;
  }
  .grid-con img {
    display: inline-block;
    height: 30px;
    width: 30px;
    background-color: #fff;
    border-radius: 50%;
    vertical-align: middle;    
    border: 1px solid #ccc;
    margin-top: -4px;
  }
  .first-grid {
    font-size: 16px;
  }
  .grid-content-right img {
    height: 30px;
    width: 30px;
    background-color: #fff;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid #ccc;
    margin-top: -4px;
  }
  .grid-content-right .vertical-hr {
    height: 15px;
    width: 1px;
    background-color: #888;
    display: inline-block;
    margin: 0 5px -2px 5px;
  }
</style>